<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>列表</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
  	<link rel="stylesheet" type="text/css" href="<%=path%>/easyui/themes/icon.css">
  	<script type="text/javascript" src="<%=path%>/easyui/jquery-1.8.2.min.js"></script>
  	<script type="text/javascript" src="<%=path%>/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="<%=path%>/easyui/sys.js"></script>
    <script type="text/javascript" src="<%=path%>/easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="<%=path%>/js/jquery-form.js"></script>
  
</head>
  
<body>
    
	<script type="text/javascript">
	$(function(){
		
		//弹出窗口
		$('#add').window({    
			width:400,    
			height:515,    
			modal:true,
			closed:true
		});  
		
		//弹出窗口
		$('#update').window({    
		    width:400,    
		    height:515,    
		    modal:true,
			closed:true   
		});  
		
	})
		
		//添加按钮
		function add() {
  			$('#add').window('open');
		}
	
		//关闭添加按钮
		function closeadd() {
  			$('#add').window('close');
		}
	
		//修改按钮
		function update(unit_id) {
  			$('#update').window('open');
  			$.ajax({
                cache:true,//保留缓存数据
                type:"POST",//为post请求
                url:"updateUser",//这是我在后台接受数据的文件名
                data:{"unit_id":unit_id},//将该表单序列化
                dataType:'json',
                //async:false,设置成true，这标志着在请求开始后，其他代码依然能够执行。如果把这个选项设置成false，这意味着所有的请求都不再是异步的了，这也会导致浏览器被锁死
                error:function(request){//请求失败之后的操作
                	window.location.reload();
                },
                success:function(update){//请求成功之后的操作
                	
                	$("#unit_id2").val(update.unit_id);
                	$("#user_id2").val(update.user_id);
                	$("#password2").val(update.password);
                	$("#user_name2").val(update.user_name);
                	$("#sex2").val(update.sex);
                	$("#identity_id2").val(update.identity_id);
                	$("#birthday2").val(update.birthday);
                	$("#phone2").val(update.phone);
                	$("#email2").val(update.email)
                	  
                }
            });
		}
		
		//修改按钮
		function closeupdate() {
  			$('#update').window('close');
		}
	
		//进行删除
		function del(unit_id) {
			$.ajax({
                cache:true,//保留缓存数据
                type:"POST",//为post请求
                url:"delete",//这是我在后台接受数据的文件名
                data:{"unit_id":unit_id/* ,"user_id":user_id */}/* $('#deng').serialize() */,//将该表单序列化
                //async:false,设置成true，这标志着在请求开始后，其他代码依然能够执行。如果把这个选项设置成false，这意味着所有的请求都不再是异步的了，这也会导致浏览器被锁死
                error:function(request){//请求失败之后的操作
                	window.location.reload();
                  },
                success:function(del){//请求成功之后的操作
                    if(del=='ok'){
                   	window.location.reload();
                    }else{
                   	window.location.reload();
                    }
                }
            });
		}
		
		//进行新增
		function addUser() {
			$.ajax({
                cache:true,//保留缓存数据
                type:"POST",//为post请求
                url:"add",//这是我在后台接受数据的文件名
                data: $('#addform').serialize(),//将该表单序列化
                //async:false,设置成true，这标志着在请求开始后，其他代码依然能够执行。如果把这个选项设置成false，这意味着所有的请求都不再是异步的了，这也会导致浏览器被锁死
                error:function(request){//请求失败之后的操作
                	window.location.reload();
                  },
                success:function(add){//请求成功之后的操作
                    if(add=='ok'){
                   	window.location.reload();
                    }else{
                   	window.location.reload();
                    }
                }
            });
		}
		
		//进行修改
		function updateUser(unit_id) {
			$.ajax({
                cache:true,//保留缓存数据
                type:"POST",//为post请求
                url:"update",//这是我在后台接受数据的文件名
                data:$('#updateform').serialize(),//将该表单序列化
                //async:false,设置成true，这标志着在请求开始后，其他代码依然能够执行。如果把这个选项设置成false，这意味着所有的请求都不再是异步的了，这也会导致浏览器被锁死
                error:function(request){//请求失败之后的操作
                	window.location.reload();
                  },
                success:function(update){//请求成功之后的操作
                    if(update=='ok'){
                   	window.location.reload();
                    }else{
                   	window.location.reload();
                    }
                }
            });
		}
	
  </script>

  	<!-- 头部 -->
	  	<div style=" background-color:#DDDDDD ;  text-align: center; color:#696969 ; height:50px " >
	  		<P align=center>
	  			<font size="+2" style="line-height:42px;" >用户管理页面</font><br>
	  		</P>
	  	</div>
    <table  border="1" cellspacing="0" cellpadding="0" style="text-align: center;" width="100%" height="50%">
		<tr>
			<td>单位ID :</td>
			<td>账号  : </td>
			<td>密码  : </td>
			<td>序号  : </td>
			<td>姓名  : </td>
			<td>性别 :  </td>
			<td>身份证号  :  </td>
			<td>出生日期  : </td>
			<td>联系电话  : </td>
			<td>邮箱  : </td>
			<td>部门描述  : </td>
			<td>状态  : </td>
			<td>启用时间 : </td>
			<td>停用时间 : </td>
			<td>操作人 : </td>
			<td>微信ID: </td>
			<td>
				操作
				<a id="add1" onclick="add()" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加</a>  
			</td>
		</tr>
		<c:forEach items="${list}" var="li">
			<tr>
				<td>${li.unit_id}</td>
				<td>${li.user_id}</td>
				<td>${li.password}</td>
				<td>${li.num}</td>
				<td>${li.user_name}</td>
				<td>${li.sex}</td>
				<td>${li.identity_id}</td>
				<td>${li.birthday}</td>
				<td>${li.phone}</td>
				<td>${li.email}</td>
				<td>${li.department}</td>
				<td>${li.status}</td>
				<td>${li.start_date}</td>
				<td>${li.end_date}</td>
				<td>${li.handle}</td>
				<td>${li.open_id}</td>
				<td>
					<a id="update1" onclick="update(${li.unit_id})" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add'">修改</a> 
					<a id="del1" onclick="del(${li.unit_id})" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-no'">删除</a> 
				</td> 
			</tr>
		</c:forEach>
    </table>
    
    
    
    <!-- //弹出窗口 -->
  	<div id="add" class="easyui-dialog" title="添加"  style="width: 400px; padding: 10px 20px; height: 410px;"  
        closed="true" buttons="#dlg-buttons">                              <!-- //弹出框包括2部分一部分是上面的文本还有一部分是下面的两个按钮   -->
           
           <div>
              <P align=center>
	  			<font size="+1" style="line-height:0px;" >添加弹窗</font><br>
	  		  </P>
           </div>
           
        <form id="addform" method="post" style="margin-top: 40px; margin-left: 40px;">  
        	<!-- 密码验证 
	        	<input id="pwd" name="pwd" type="password" class="easyui-validatebox" data-options="required:true" />   
				<input id="rpwd" name="rpwd" type="password" class="easyui-validatebox"     
	 		    required="required" validType="equals['#pwd']" />  
 		    -->
            <div class="fitem">  
                <label> 单 位 I D : </label>  
                <input id="unit_id" name="unit_id" style="" class="easyui-textbox" editable="true" />  
            </div>  
            <br>
            <div class="fitem">  
                <label>  用户账号  :   </label>  
                <!-- <input id="pwd" name="pwd" type="password" style="" class="easyui-textbox" editable="false" />   -->
                <input id="user_id" name="user_id" type="test" class="easyui-textbox"  />
            </div>  
            <br>
            <div class="fitem">  
                <label>  用户密码  : </label>  
                <!-- <input id="pwd" name="pwd" type="password" style="" class="easyui-textbox" editable="false" />   -->
                <input id="password" name="password" type="password" class="easyui-textbox"  />
            </div>  
            <br>
            <div class="fitem">  
                <label>  用户姓名  : </label>  
                <!-- <input id="pwd" name="pwd" type="password" style="" class="easyui-textbox" editable="false" />   -->
                <input id="user_name" name="user_name" type="test" class="easyui-textbox"  />
            </div>  
            <br>
            <div class="fitem">  
                <label>  用户性别  : </label>  
                <!-- <input id="pwd" name="pwd" type="password" style="" class="easyui-textbox" editable="false" />   -->
                <input id="sex" name="sex" type="test" class="easyui-textbox"  />
            </div>  
            <br>
            <div class="fitem">  
                <label> 身份证号 : </label>  
                <!-- <input id="pwd" name="pwd" type="password" style="" class="easyui-textbox" editable="false" />   -->
                <input id="identity_id" name="identity_id" type="test" class="easyui-textbox"  />
            </div>  
            <br>
            <div class="fitem">  
                <label>  用户生日  : </label>  
                <!-- <input id="pwd" name="pwd" type="password" style="" class="easyui-textbox" editable="false" />   -->
                <input id="birthday" name="birthday" type="test" class="easyui-textbox"  />
            </div>  
            <br>
            <div class="fitem">  
                <label>  用户电话  : </label>  
                <!-- <input id="pwd" name="pwd" type="password" style="" class="easyui-textbox" editable="false" />   -->
                <input id="phone" name="phone" type="test" class="easyui-textbox"  />
            </div>  
            <br>
            <div class="fitem">  
                <label>  用户邮箱  : </label>  
                <!-- <input id="pwd" name="pwd" type="password" style="" class="easyui-textbox" editable="false" />   -->
                <input id="email" name="email" type="test" class="easyui-textbox"  />
            </div>  
            <!-- //直接写提交取消的事件不需要在js中绑定   -->
            <div id="dlg-buttons" style="display: block">  
                <a id="ad" href="javascript:void(0)" class="easyui-linkbutton c6" iconcls="icon-ok" onclick="addUser()" style="width: 90px" >提交</a>  
                <a id="addUser" href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" onclick="closeadd()" style="width: 90px">取消</a>  
            </div>  
         </form>
    </div> 
    <!-- //弹出窗口 -->
  	<div id="update" class="easyui-dialog" title="修改"  style="width: 400px; padding: 10px 20px; height: 410px;"  
        closed="true" buttons="#dlg-buttons">                              <!-- //弹出框包括2部分一部分是上面的文本还有一部分是下面的两个按钮   -->
           
           <div>
              <P align=center>
	  			<font size="+1" style="line-height:0px;" >修改弹窗</font><br>
	  		  </P>
           </div>
           
        <form id="updateform" method="post" style="margin-top: 40px; margin-left: 40px;">  
        	<!-- 密码验证 
	        	<input id="pwd" name="pwd" type="password" class="easyui-validatebox" data-options="required:true" />   
				<input id="rpwd" name="rpwd" type="password" class="easyui-validatebox"     
	 		    required="required" validType="equals['#pwd']" />  
 		    -->
            <div class="fitem">  
                <label> 单 位 I D : </label>  
                <input id="unit_id2" name="unit_id" style="" class="easyui-textbox" editable="true" value="" />  
            </div>  
            <br>
            <div class="fitem">  
                <label>  用户账号  :   </label>  
                <!-- <input id="pwd" name="pwd" type="password" style="" class="easyui-textbox" editable="false" />   -->
                <input id="user_id2" name="user_id" type="test" class="easyui-textbox"  />
            </div>  
            <br>
            <div class="fitem">  
                <label>  用户密码  : </label>  
                <!-- <input id="pwd" name="pwd" type="password" style="" class="easyui-textbox" editable="false" />   -->
                <input id="password2" name="password" type="password" class="easyui-textbox"  />
            </div>  
            <br>
            <div class="fitem">  
                <label>  用户姓名  : </label>  
                <!-- <input id="pwd" name="pwd" type="password" style="" class="easyui-textbox" editable="false" />   -->
                <input id="user_name2" name="user_name" type="test" class="easyui-textbox"  />
            </div>  
            <br>
            <div class="fitem">  
                <label>  用户性别  : </label>  
                <!-- <input id="pwd" name="pwd" type="password" style="" class="easyui-textbox" editable="false" />   -->
                <input id="sex2" name="sex" type="test" class="easyui-textbox"  />
            </div>  
            <br>
            <div class="fitem">  
                <label> 身份证号 : </label>  
                <!-- <input id="pwd" name="pwd" type="password" style="" class="easyui-textbox" editable="false" />   -->
                <input id="identity_id2" name="identity_id" type="test" class="easyui-textbox"  />
            </div>  
            <br>
            <div class="fitem">  
                <label>  用户生日  : </label>  
                <!-- <input id="pwd" name="pwd" type="password" style="" class="easyui-textbox" editable="false" />   -->
                <input id="birthday2" name="birthday" type="test" class="easyui-textbox"  />
            </div>  
            <br>
            <div class="fitem">  
                <label>  用户电话  : </label>  
                <!-- <input id="pwd" name="pwd" type="password" style="" class="easyui-textbox" editable="false" />   -->
                <input id="phone2" name="phone" type="test" class="easyui-textbox"  />
            </div>  
            <br>
            <div class="fitem">  
                <label>  用户邮箱  : </label>  
                <!-- <input id="pwd" name="pwd" type="password" style="" class="easyui-textbox" editable="false" />   -->
                <input id="email2" name="email" type="test" class="easyui-textbox"  />
            </div>  
            <!-- //直接写提交取消的事件不需要在js中绑定   -->
            <div id="dlg-buttons" style="display: block">  
                <a id="upd" href="javascript:void(0)" class="easyui-linkbutton c6" iconcls="icon-ok" onclick="updateUser()" style="width: 90px" >提交</a>  
                <a id="updateUser" href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" onclick="closeupdate()" style="width: 90px">取消</a>  
            </div>  
         </form>
    </div> 
  </body>
</html>
